<template>
	<view>
		<view class="chuan" >
			<view class="v" >
				<view class="vs" v-for="(item,index) in imageList" >
					<image class="simage" :src="item" @click="look_img(item)"></image>
					<image class="as" src="@/static/delete.png" @click="deletes(item,index)"></image>
				</view>
				<image @click="up" class="aimage" src="@/static/bg.png"></image>
			</view>	
		</view>
		<view class="zheshows" v-if="zheshow" @click="guan"><image :src="ser_look"></image></view>
		<uni-popup ref="popup" type="center" ><image  :src="ser_look" mode="aspectFit"></image></uni-popup>
	</view>
</template>

<script>
	export default {
		name:"imagelist",
		props: {
			// 定义上传数量
			Lnumber: {
				type: String || Number,
				default: ''
			},
		},
		data() {
			return {
				imageList:[],
				ser_look:''
			};
		},
		methods:{
			up(){ // 上传
				let that = this
				if(that.imageList.length >= that.Lnumber){
					uni.showToast({
						title:`只能上传${that.Lnumber}张图片`,
						icon:'none'
					})
					return
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success(res) {
						let upimg = res.tempFilePaths[0];
						that.imageList.push(res.tempFilePaths[0]) // < 演示代码 更换上传接口后可直接删除49行代码，使用64行代码 >
						let token = uni.getStorageSync('token') 
						uni.uploadFile({
						  url: 'https://xxxxxx.com/api/Common/upload', // 示例接口
						  filePath: upimg, // 图片的临时文件路径
						  name: 'file', // 上传的文件名称，后端根据这个名称来获取文件
						  header: {
								token:token  // 传入token
						  },
						  success: (res) => {
							  // 根据接口返回数据格式调整赋值变量
							  uni.showToast({
								title:'上传成功'
							  })
							  let q = JSON.parse(res.data)
							  that.imageList.push(q.data.fullurl)
						  },
						  fail: (err) => {
							  uni.showToast({
								title:err,
								icon:'none'
							  })
						  }
						})
				  }
				})    
			},
			deletes(item,index){ // 删除数组
				this.imageList.splice(index, 1);
			},
			look_img(item){ // 查看图片
				this.$refs.popup.open('center')
				this.ser_look = item
			},
			guan(){this.$refs.popup.close()}
		}
	}
</script>

<style lang="scss">
			.chuan{width: 90%;margin: 0 auto;
			.v{width: 100%;display: flex;flex-wrap: wrap;
			.aimage{width: 180rpx;height: 180rpx;margin-top: 30rpx;margin-left: 30rpx;}
			.vs{margin-left: 30rpx;margin-top: 30rpx;
			.simage{width: 180rpx;height: 180rpx;border-radius: 20rpx;}
			.as{width: 34.5rpx;height: 34.5rpx;position: absolute;margin: 0 0 0 -34rpx;}}}}
</style>